<template>
  <div class="container counsel_b">
    <p>乐政人工在线</p>
    <p>主公，亮亮正在前往乐政图书馆学习新知识，暂时无法回复您的消息。亮亮在此向主公举荐乐政政务专家，为您继续解答疑惑。</p>
    <div class="clearfix">
      <div class="item">
        <i class="num num_1"></i>
        <div class="text text1">
          <p>与乐政政务专家团直接对话</p>
          <p>解答政务相关疑惑</p>
        </div>
      </div>
      <div class="item">
        <i class="num num_2"></i>
        <div class="text text2">
          <p>实时在线咨询，一键发布需求、下单，追踪事项办理进度</p>
          <p>扫一扫，乐政APP收入囊中</p>
          <img style="margin-top:10px;" src="../../static/images/No.2_1.png" alt="">
        </div>
      </div>
      <div class="item">
        <i class="num num_3"></i>
        <div class="text text3">
          <p>乐政官方微博、微信实时互动</p>
          <p>最新政策动态及时追踪，当下城市热点一网打尽</p>
          <p>还有更多精彩福利活动，立刻扫描关注↓↓</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.counsel_b {
  padding: 50px 0;
}

.counsel_b p {
  font-size: 16px;
  color: #666;
  line-height: 25px;
}

.counsel_b .item {
  position: relative;
  float: left;
  margin-top: 40px;
  margin-right: 36px;
  width: 376px;
  height: 300px;
  background: url(../../static/images/5-bj.png) no-repeat;
}

.counsel_b .item:nth-last-child(1) {
  margin-right: 0;
}

.counsel_b .item .text {
  text-align: center;
  color: #666;
}

.counsel_b .item .text1 {
  position: absolute;
  top: 140px;
  width: 100%;
}

.counsel_b .item .text2 {
  position: absolute;
  top: 100px;
  padding: 0 40px;
  width: 306px;
}

.counsel_b .item .text3 {
  position: absolute;
  top: 120px;
  padding: 0 40px;
  width: 306px;
}

.counsel_b .item .num {
  position: absolute;
  width: 32px;
  height: 53px;
  left: 50%;
  top: 20px;
  margin-left: -16px;
}

.counsel_b .item .num_1 {
  background: url(../../static/images/No.1.png) no-repeat;
}

.counsel_b .item .num_2 {
  background: url(../../static/images/No.2.png) no-repeat;
}

.counsel_b .item .num_3 {
  background: url(../../static/images/No.3.png) no-repeat;
}
</style>
